import { useState } from 'react'
import { Form, Input, Button, Card, Row, Col, Typography, Checkbox } from 'antd'
import { UserOutlined, LockOutlined } from '@ant-design/icons'
import { useNavigate } from 'react-router'
import './index.css'
import { setLocalStorage } from 'packages/shared/utils/storage'
import { v4 } from 'uuid'

const { Title } = Typography;

const LoginPage = () => {
    const [loading, setLoading] = useState(false)
    const router = useNavigate()
    const onFinish = (values: any) => {
        setLoading(true);
        // 这里添加登录逻辑
        setTimeout(() => {
            setLoading(false);
            setLocalStorage('user', {
                ...values,
                loginDate: new Date().getTime(),
                ...values,
                token: v4(),
            }, true)
            router('/home')
        }, 1000);
    };

    return (
        <div className="login-page-clean-bg">
            {/* 背景图片层 - 使用简约清晰的图案 */}
            <div className="background-pattern"></div>

            <Row justify="center" align="middle" style={{ minHeight: '100vh' }}>
                <Col className=''>
                    <Card className="log-card">
                    </Card>
                </Col>
                <Col xs={20} sm={16} md={12} lg={8} xl={6} className=''>
                    <Card className="login-card">
                        <div className="login-header">
                            <Title level={2} style={{ textAlign: 'center', margin: 0 }}>
                                企业办公系统
                            </Title>
                            <p className="login-subtitle">高效协作，智能办公</p>
                        </div>

                        <Form
                            name="normal_login"
                            className="login-form"
                            initialValues={{ remember: true }}
                            onFinish={onFinish}
                        >
                            <Form.Item
                                name="username"
                                rules={[{ required: true, message: '请输入用户名!' }]}
                            >
                                <Input
                                    prefix={<UserOutlined />}
                                    placeholder="用户名"
                                    size="large"
                                />
                            </Form.Item>

                            <Form.Item
                                name="password"
                                rules={[{ required: true, message: '请输入密码!' }]}
                            >
                                <Input
                                    prefix={<LockOutlined />}
                                    type="password"
                                    placeholder="密码"
                                    size="large"
                                />
                            </Form.Item>

                            <Form.Item>
                                <Form.Item name="remember" valuePropName="checked" noStyle>
                                    <Checkbox>记住我</Checkbox>
                                </Form.Item>
                                <a className="login-form-forgot" onClick={() => router('/forgotPassword')}>
                                    忘记密码?
                                </a>
                            </Form.Item>

                            <Form.Item>
                                <Button
                                    type="primary"
                                    htmlType="submit"
                                    className="login-form-button"
                                    loading={loading}
                                    block
                                    size="large"
                                >
                                    登录
                                </Button>
                            </Form.Item>

                            <div className="login-footer">
                                还没有账号? <a onClick={() => router('/register')}>立即注册</a>
                            </div>
                        </Form>
                    </Card>
                </Col>
            </Row>
        </div>
    );
};

export default LoginPage